<template>
  <div class="conMain">
    <el-row  style="display: flex;justify-content: space-between;">
      <el-col :span="15" class="form-box">
          <div style="border-bottom: 1px solid #dddddd;padding-bottom: 10px;">
            <el-row>
              <el-col :span="6" class="user-name">
                余额记录
              </el-col>
              <el-col :span="18" style="text-align: right;">
                <el-button type="warning" size="mini">当前余额：{{money}} 元</el-button>
                <el-button type="danger" size="mini" icon="el-icon-s-finance" @click="draw">去提现</el-button>
                <el-button type="success" size="mini" icon="el-icon-tickets"  @click="drawlist">提现列表</el-button>
              </el-col>
            </el-row>
          </div>
          <el-table v-loading="loading"  :data="list" style="width: 100%" :empty-text='emptytxt'>
            <el-table-column prop="memo" label="类型" align="center" width="180" :show-overflow-tooltip="true" />
            <el-table-column prop="after" label="当前余额" align="center" width="100" :show-overflow-tooltip="true" />
            <el-table-column prop="money" label="变动金额" align="center" width="100" :show-overflow-tooltip="true" />
            <el-table-column prop="before" label="之前金额" align="center" width="100" :show-overflow-tooltip="true" />
            <el-table-column prop="before" label="订单信息" align="center"   :show-overflow-tooltip="true">
              <template slot-scope="scope">
               <div  v-if="scope.row.order.sn">
                 选购号码：{{scope.row.order.phone}}，订单号：{{scope.row.order.sn}},
               </div>
               <div  v-else>
                 {{scope.row.more}}
               </div>
              </template>
            </el-table-column>
            <el-table-column prop="createtime" label="时间" align="center"  :show-overflow-tooltip="true" />
          </el-table>
          <div class="pagination">
              <el-pagination
                :current-page="params.page"
                :page-sizes="[15]"
                :page-size="params.pagesize"
                layout="total, prev, pager, next"
                :total="total"
                @current-change="handleCurrentChange"
              />
          </div>
      </el-col>
      <el-col :span="8">
        <div class="form-box">
          <div class="user-profile">
            <div class="box-center">
              <div class="user-name text-center">修改资料</div>
            </div>
          </div>
          <div class="user-bio mt20">
            <el-form ref="ruleForm"  size="small" :model="sub" :rules="rules"  label-width="100px">
              <el-form-item label="登录账号" prop="nickname">
                <el-input v-model="sub.username"  placeholder=""  disabled=""/>
              </el-form-item>
              <el-form-item label="真实姓名" prop="name">
                <el-input v-model="sub.name"  placeholder="请输入真实姓名" clearable  autocomplete="off"/>
              </el-form-item>
              <el-form-item label="联系电话" prop="mobile">
                <el-input v-model="sub.mobile"  placeholder="请输入联系电话" clearable  autocomplete="off"/>
              </el-form-item>
              <el-form-item label="支付宝姓名" prop="draw_name_zfb">
                <el-input v-model="sub.draw_name_zfb"  placeholder="请输入支付宝姓名" clearable  autocomplete="off"/>
              </el-form-item>
              <el-form-item label="支付宝账号" prop="draw_account_zfb">
                <el-input v-model="sub.draw_account_zfb"  placeholder="请输入支付宝账号" clearable  autocomplete="off"/>
              </el-form-item>

              <el-form-item label="银行卡姓名" prop="draw_name_bank">
                <el-input v-model="sub.draw_name_bank"  placeholder="请输入银行卡姓名" clearable  autocomplete="off"/>
              </el-form-item>
              <el-form-item label="银行卡账号" prop="draw_account_bank">
                <el-input v-model="sub.draw_account_bank"  placeholder="请输入银行卡账号" clearable  autocomplete="off"/>
              </el-form-item>

              <el-form-item label="所属银行" >
                <el-select style="width:100%;" filterable  clearable   v-model="sub.bank_name"  placeholder="请选择">
                   <el-option   :label="item.label" :value="item.label" v-for="(item,index) in banklist" />
                </el-select>
              </el-form-item>


            </el-form>
            <div style="margin-top: 30px;text-align: center;">
              <el-button type="primary" size="small"  @click="subForm">确定修改</el-button>
            </div>
          </div>
        </div>
        <div class="form-box">
          <div class="user-profile">
            <div class="box-center">
              <div class="user-name text-center">重置密码</div>
            </div>
          </div>
          <div class="user-bio mt20">
            <el-form ref="ruleFormr"  size="small" :model="subr" :rules="rulesr"  label-width="100px">
              <el-form-item label="原密码" prop="oldpwd">
                <el-input type="password" v-model="subr.oldpwd"  placeholder="请输入原密码" clearable autocomplete="off" />
              </el-form-item>
              <el-form-item label="新密码" prop="newpwd">
                <el-input type="password" v-model="subr.newpwd"  placeholder="请输入新密码" clearable  autocomplete="off"/>
              </el-form-item>
              <el-form-item label="确认密码" prop="renewpwd">
                <el-input type="password" v-model="subr.renewpwd"  placeholder="请输入确认密码" clearable  autocomplete="off"/>
              </el-form-item>

            </el-form>
            <div style="margin-top: 30px;text-align: center;">
              <el-button type="primary" size="small"  @click="subFormr">确定修改</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="提现申请"
    :visible.sync="drawshow"
    :close-on-click-modal="false"
    left  width="40%">
      <el-form    size="small"  label-width="120px">
        <el-form-item label="提现方式" >
          <el-select style="width:100%;"  v-model="subdraw.type"  placeholder="请选择">
           <el-option   :label="item.txt" :value="item.val" v-for="(item,index) in drawtype" />
          </el-select>
        </el-form-item>

        <el-row v-if="subdraw.type==1">
          <el-col :span="12">
            <el-form-item label="支付宝姓名" >
              <el-input v-model="subdraw.draw_name_zfb"  placeholder="请输入支付宝姓名" clearable  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付宝账号">
              <el-input  v-model="subdraw.draw_account_zfb"  placeholder="请输入支付宝账号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" >
              <el-input v-model="subdraw.draw_idcard_bank"  placeholder="请填写身份证号码" clearable  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input  v-model="subdraw.draw_phone"  placeholder="请填写手机号码" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="subdraw.type==2">
          <el-col :span="24">
            <el-form-item label="所属银行" >
              <el-select style="width:100%;" filterable  clearable   v-model="subdraw.bank_name"  placeholder="请选择">
               <el-option   :label="item.label" :value="item.label" v-for="(item,index) in banklist" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡姓名" >
              <el-input v-model="subdraw.draw_name_bank"  placeholder="请输入银行卡姓名" clearable  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡账号">
              <el-input  v-model="subdraw.draw_account_bank"  placeholder="请输入银行卡账号" clearable />
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="身份证号" >
              <el-input v-model="subdraw.draw_idcard_bank"  placeholder="请填写身份证号码" clearable  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input  v-model="subdraw.draw_phone"  placeholder="请填写手机号码" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="金额">
          <el-input type="number" v-model="subdraw.money"  placeholder="请输入提现金额" clearable >
          <template slot="append">元</template>
          </el-input>
        </el-form-item>

      </el-form>
      <div style="margin-top: 30px;text-align: center;">
        <el-button type="primary" size="small"  @click="subDraw">确定提现</el-button>
      </div>
    </el-dialog>
    <el-dialog title="提现列表"
    :visible.sync="dlistshow"
    :close-on-click-modal="false"
    left  width="60%">
      <el-table v-loading="loadingd"  :data="dlist" style="width: 100%" :empty-text='emptytxtd'>
        <el-table-column prop="sn" label="SN" align="center" width="180" :show-overflow-tooltip="true" />
        <el-table-column prop="draw_type_txt" label="提现类型" align="center" width="100" :show-overflow-tooltip="true" />
        <el-table-column prop="draw_name" label="收款姓名" align="center"  :show-overflow-tooltip="true" />
        <el-table-column prop="draw_account" label="收款账号" align="center"  :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <el-image
                v-if="scope.row.draw_type === 3"
                style="width:30px;height:30px"
                :src="scope.row.draw_account"
                :preview-src-list="[scope.row.draw_account]"
            >
            <div slot="error" class="image-slot"></div>
            </el-image>
            <span v-else>{{scope.row.draw_account}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="提现金额" align="center"  :show-overflow-tooltip="true" />
        <el-table-column prop="status_txt" label="打款状态" align="center"  :show-overflow-tooltip="true" />
        <el-table-column prop="status_msg" label="失败原因" align="center" width="120"  :show-overflow-tooltip="true" />
        <el-table-column prop="pay_time" label="打款时间" align="center"  :show-overflow-tooltip="true" />
        <el-table-column prop="createtime" label="申请时间" align="center"  :show-overflow-tooltip="true" />
      </el-table>
      <div class="pagination">
          <el-pagination
            :current-page="paramsd.page"
            :page-sizes="[10]"
            :page-size="paramsd.pagesize"
            layout="total, prev, pager, next"
            :total="totald"
            @current-change="handleCurrentChanged"
          />
      </div>

    </el-dialog>

  </div>
</template>
<script>
  import { getInfo,setInfo,resetPwd } from  '@/api/user'
  import { money_list,money_draw,money_draw_post,money_drawList,money_getBank } from  '@/api/money'

  import store from '@/store'
  export default {
    data() {
      return {
        total:0,
        loading:true,
        emptytxt:'',
        list: [],
        params: {
          page: 1,
          pagesize:15,
        },
        sub:{
        	username:'',
        	name:'',
        	mobile:'',
        	draw_name_zfb:'',
        	draw_account_zfb:'',
          bank_name:'',
        	draw_name_bank:'',
        	draw_account_bank:''
        },
        rules: {
          name: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' }
          ],
        },
        subr:{
        	oldpwd:'',
        	newpwd:'',
        	renewpwd:'',
        },
        rulesr: {
          oldpwd: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newpwd: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, message: '新密码最少为6个字符', trigger: 'blur' }
          ],
          renewpwd: [
            { required: true, message: '请输入确认密码', trigger: 'blur' }
          ],
        },
        money:'0',
        drawshow:false,
        drawtype:[{val:'1',txt:'支付宝'},{val:'2',txt:'银行卡'}],
        subdraw:{
        	money:'',
        	type:'1',
        	draw_name_zfb:'',
        	draw_account_zfb:'',
          bank_name:'',
        	draw_name_bank:'',
        	draw_idcard_bank:'',
        	draw_phone:'',
        	draw_account_bank:''
        },
        dlist:{},
        dlistshow:false,
        totald:0,
        loadingd:true,
        emptytxtd:'',
        listd: [],
        paramsd: {
          page: 1,
          pagesize:10,
        },
        banklist:[],

      }
    },
    created() {
      getInfo().then(res => {
        let data=res.data.info;
        this.money=data.money;
        this.sub.username=data.username;
        this.sub.name=data.name;
        this.sub.mobile=data.mobile;
        this.sub.draw_name_zfb=data.draw_name_zfb;
        this.sub.draw_account_zfb=data.draw_account_zfb;
        this.sub.bank_name=data.bank_name;
        this.sub.draw_name_bank=data.draw_name_bank;
        this.sub.draw_account_bank=data.draw_account_bank;
      })
      money_getBank().then(res => {

        this.banklist=res.data.banklist
      })
      this.getList()

    },
    methods: {
      getList(page) {
        this.params.page = page?page:this.params.page;
        this.emptytxt='加载中...';
        this.loading=true;
        money_list(this.params).then(res => {
          this.list=res.data.list
          this.total=res.data.total
          this.loading = false
          if(this.list.length==0){
            this.emptytxt='暂无数据'
          }
        })
      },
      handleCurrentChange(val) {
          this.params.page = val
          this.getList()
      },
      subForm() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            setInfo(this.sub).then(res => {
              this.$notify({
                title:'温馨提示',
                message:res.msg,
                type: 'success',
                duration:1000,
              })
            })
          } else {
            return false
          }
        })
      },
      subFormr() {
        if(this.subr.newpwd!=this.subr.renewpwd){
          return this.$notify({
                title:'温馨提示',
                message:'新密码和确认密码不一致',
                type: 'error',
                duration:1000,
              })
        }
        this.$refs['ruleFormr'].validate((valid) => {
          if (valid) {
            resetPwd(this.subr).then(res => {
              this.subr={
                oldpwd:'',
                newpwd:'',
                renewpwd:'',
              }
              this.$notify({
                title:'温馨提示',
                message:res.msg,
                type: 'success',
                duration:1000,
              })
              setTimeout(() => {
                store.dispatch('user/resetToken').then(() => {
                  location.reload()
                })
              }, 1000)

            })
          } else {
            return false
          }
        })
      },
      draw(){

        money_draw().then(res => {
          this.subdraw.draw_name_zfb=res.data.info.draw_name_zfb
          this.subdraw.draw_account_zfb=res.data.info.draw_account_zfb
          this.subdraw.bank_name=res.data.info.bank_name
          this.subdraw.draw_name_bank=res.data.info.draw_name_bank
          this.subdraw.draw_account_bank=res.data.info.draw_account_bank
          this.subdraw.draw_idcard_bank=res.data.info.draw_idcard_bank
          this.subdraw.draw_phone=res.data.info.draw_phone
        })

        this.drawshow=true
      },
      subDraw(){
        if(this.subdraw.type==1 &&  (!this.subdraw.draw_name_zfb || !this.subdraw.draw_account_zfb)){
          return this.$notify({
                title:'错误提示',
                message:'支付宝姓名和账号不能为空',
                type: 'error',
                duration:1000,
          });
        }else if(this.subdraw.type==2 &&  (!this.subdraw.draw_name_bank || !this.subdraw.draw_account_bank || !this.subdraw.bank_name)){
          return this.$notify({
                title:'错误提示',
                message:'银行卡信息不能为空',
                type: 'error',
                duration:1000,
          });

        }else if(this.subdraw.money<=0){
          return this.$notify({
                title:'错误提示',
                message:'提现金额不正确',
                type: 'error',
                duration:1000,
          });

        }else if(this.subdraw.money>parseInt(this.money)){
          return this.$notify({
                title:'错误提示',
                message:'提现金额不足',
                type: 'error',
                duration:1000,
          });
        }
        if( (!this.subdraw.draw_idcard_bank)){
          return this.$notify({
                title:'错误提示',
                message:'身份证号不能为空',
                type: 'error',
                duration:1000,
          });
        }
        if(!/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(this.subdraw.draw_idcard_bank)){
            return this.$notify({
                title:'错误提示',
                message:'身份证号有误',
                type: 'error',
                duration:1000,
          });
        }
				if( (!this.subdraw.draw_phone)){
                return this.$notify({
                title:'错误提示',
                message:'手机号码不能为空',
                type: 'error',
                duration:1000,
          });
				}
				if(!/^1\d{10}$/.test(this.subdraw.draw_phone)){
                return this.$notify({
                title:'错误提示',
                message:'手机号码有误',
                type: 'error',
                duration:1000,
          });
				}
        money_draw_post(this.subdraw).then(res => {
          this.$notify({
              title:'温馨提示',
              message:res.msg,
              type: 'success',
              duration:1000,
          });
          this.drawshow=false
          this.subdraw.money=''
          this.getList()
        })

      },
      drawlist(){
        this.getDrawList()
        this.dlistshow=true
      },
      getDrawList(page) {
        this.paramsd.page = page?page:this.paramsd.page;
        this.emptytxtd='加载中...';
        this.loadingd=true;
        money_drawList(this.paramsd).then(res => {
          this.dlist=res.data.list
          this.totald=res.data.total
          this.loadingd = false
          if(this.dlist.length==0){
            this.emptytxtd='暂无数据'
          }
        })
      },
      handleCurrentChanged(val){
        this.paramsd.page = val
        this.getDrawList()
      }
    },

  }

</script>


<style>
  .user-name{
    font-size:16px;
    font-weight: 600;
  }
  .form-box{
    margin-bottom:20px;
    border:1px solid #dddddd;
    padding:20px;
  }
  .clearfix{
    display: flex;
    justify-content: space-between;


  }

</style>
